<template><!--离线学习-->
    <div style="height: 100%">
        <navbar :title="$t('personal_offline')"></navbar>
        <div class="content-noBottom">
            <div class="box-tab-01 paddingLR15 white-bg bottom-shadow-02">
                <ul class="clearfix">
                    <li :class="{'color666': true, 'cur': isDownloaded}" @click="changeTab('downloaded')">{{ $t('mod_downloaded') }}</li><!--已下载-->
                    <li :class="{'color666': true, 'cur': !isDownloaded}" @click="changeTab('downloading')">{{ $t('mod_downloading') }}</li><!--下载中-->
                </ul>
            </div>
            <ul class="module-list-15 white-bg bottom-shadow" v-show="isDownloaded">
                <li v-for="courseTask in downloadCourseTaskList" :key="courseTask.courseId" v-if="haveStatusInModules(courseTask.modules, 'downloaded')">
                    <p @click="detailJump(courseTask.courseId, courseTask.tkhId)">{{ courseTask.courseTile }}</p>
                    <ul>
                        <li class="clearfix" v-for="moduleId in courseTask.modules" :key="moduleId" v-if="downloadCourseModTask(moduleId) !== null && downloadCourseModTask(moduleId).status === 'completed'">
                            <div class="box-19 clearfix" @click="lookVidoe(moduleId)">
                                <span class="gray-box-bg"><i class="link-document-icon"></i></span>
                                <div class="download-content">
                                    <p class="word-clamp-1">{{ downloadCourseModTask(moduleId).title }}</p>
                                    <p class="font-size11 color999">{{ downloadCourseModTask(moduleId).fileSize }}</p>
                                    <p class="font-size11 color999 margin-top5">{{ $t('lab_learned_time') }}：{{ downloadCourseModTask(moduleId).studyTime }}</p>
                                </div>
                            </div>
                            <span class="delete-box" @click="deleteTask(courseTask.courseId, moduleId)"><i class="delete-icon-02"></i></span>
                        </li>
                    </ul>
                </li>
            </ul>
            <!-- 下载中... -->
            <ul class="module-list-15 white-bg bottom-shadow" v-show="!isDownloaded">
                <li v-for="courseTask in downloadCourseTaskList" :key="courseTask.courseId" v-if="haveStatusInModules(courseTask.modules, 'downloading')">
                    <p @click="detailJump(courseTask.courseId, courseTask.tkhId)">{{ courseTask.courseTile }}</p>
                    <ul>
                        <li class="clearfix" v-for="moduleId in courseTask.modules" :key="moduleId" v-if="downloadCourseModTask(moduleId) !== null && downloadCourseModTask(moduleId).status !== 'completed'">
                            <div class="box-19 clearfix" @click="pauseOrResume(moduleId)">
                                <span class="gray-box-bg"><i class="down-document-icon"></i></span>
                                <div class="download-content">
                                    <p class="word-clamp-1">{{ downloadCourseModTask(moduleId).title }}</p>
                                    <div class="progress">
                                        <div class="loader-container"
                                             :style="{'width': downloadCourseModTask(moduleId).percentage}">
                                        </div>
                                    </div>
                                    <p class="font-size11 color999 clearfix">
                                        <span>{{ $t(downloadCourseModTask(moduleId).statusLabel) }} {{ downloadCourseModTask(moduleId).rate }}</span>
                                        <span style="float: right;">{{ downloadCourseModTask(moduleId).fileSize }}</span>
                                    </p>
                                </div>
                            </div>
                            <span class="delete-box" @click="deleteTask(courseTask.courseId, moduleId)"><i class="delete-icon-02"></i></span>
                        </li>
                    </ul>
                </li>
            </ul>
            <!-- ../下载中 -->
            <!--暂无数据-->
            <div v-if="isDownloaded && notHaveData('completed')" style="height:100%;">
                <div class="box-table" style="width:100%;height:100%;">
                    <div class="box-table-cell" style="text-align: center;">
                        <div class="no-data">
                            <img src="../../../static/images/no-data.png" alt=""/>
                            <p class="color999">{{ $t("no_data") }}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div v-if="(!isDownloaded && (notHaveData('pause') && notHaveData('ing') && notHaveData('waiting')))" style="height:100%;">
                <div class="box-table" style="width:100%;height:100%;">
                    <div class="box-table-cell" style="text-align: center;">
                        <div class="no-data">
                            <img src="../../../static/images/no-data.png" alt=""/>
                            <p class="color999">{{ $t("no_data") }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <van-dialog
        v-model="deleteTaskObj.show"
        show-cancel-button
        :title="$t('lab_delete_movie')"
        :cancelButtonText="$t('cancel')"
        :confirm-button-text="$t('sure')"
        @confirm="deleteConfirm"
        >
        </van-dialog>
    </div>
</template>

<script>
export default {
    name: 'Offline',
    components: {
    },
    data() {
        return {
            isDownloaded: true,
            downloadCourseTaskList: [],
            notData: true,
            deleteTaskObj: {
                show: false,
                courseId: 0,
                modId: 0,
                pauseOrResumeLock: false
            }
        };
    },
    methods: {
        //切换'已下载'和'下载中'
        changeTab(status) {
            if (status === 'downloaded') {
                this.isDownloaded = true;
            } else if (status === 'downloading') {
                this.isDownloaded = false;
            }
        },
        //暂停或继续下载
        pauseOrResume(modId) {
            if (!this.pauseOrResumeLock) {
                let module = this.downloadCourseModTask(modId);
                if (module.status === 'ing' || module.status === 'waiting') {
                    module.statusLabel = 'lab_pause';
                    module.status = 'pause';
                    module.rate = '';
                    module.dtask.pause();
                } else if (module.status === 'pause') {
                    module.status = 'waiting';
                    module.statusLabel = 'lab_waiting';
                    module.rate = '';
                }
                module.updateTime = new Date().getTime();
                this.$store.commit('putDownloadCourseModTask', {'key': module.modId, 'value': module});
                this.startDownTask('resume');
                setTimeout(() => {
                    this.pauseOrResumeLock = false;
                }, 500);
            }
        },
        //删除任务
        deleteTask(courseId, modId) {
            this.deleteTaskObj.show = true;
            this.deleteTaskObj.courseId = courseId;
            this.deleteTaskObj.modId = modId;
        },
        deleteConfirm() {
            let obj = {
                'courseId': this.deleteTaskObj.courseId,
                'modId': this.deleteTaskObj.modId
            };
            let module = this.downloadCourseModTask(obj.modId);
            this.$store.commit('removeDownloadCourseModTask', obj);
            window.plus.storage.setItem(this.$store.state.config.loginUser.usr_ent_id + '-downloadCourseTaskList', JSON.stringify(this.$store.state.config.downloadCourseTaskList));
            window.plus.storage.setItem(this.$store.state.config.loginUser.usr_ent_id + '-downloadCourseModTask', JSON.stringify(this.$store.state.config.downloadCourseModTask));
            //取消任务
            if (module.dtask) {
                try {
                    module.dtask.abort();
                } catch (e) {}
            }
            //删除本地资源
            try {
                if (module) {
                    //本地资源
                    window.plus.io.resolveLocalFileSystemURL(module.filename, function(entry) {
                        entry.file(function(file) {
                            entry.remove();
                        });
                    });
                }
            } catch (e) {}
            if (!this.isDownloaded) {
                setTimeout(() => {
                    this.startDownTask('start');
                }, 1000);
            }
        },
        //跳转到视频播放
        lookVidoe(modId) {
            let module = this.downloadCourseModTask(modId);
            this.$router.replace({path: `/offline/${this.wbEncryptor(this.$store.state.config.loginUser.usr_ent_id)}/completed`});
            this.$router.push({path: `/vodContent/${module.tkhId}/${module.courseId}/${module.resId}/${modId}`});
        },
        //课程跳转
        detailJump(itmId, tkhId) {
            this.$router.push({path: `/course/${itmId}/${tkhId}`});
        }
    },
    mounted() {
        if (this.$route.params.tab === 'completed') {
            this.isDownloaded = true;
        } else {
            this.isDownloaded = false;
        }
        this.downloadCourseTaskList = this.$store.state.config.downloadCourseTaskList;
    },
    computed: {
        downloadCourseModTask() {
            //下载任务信息
            return function(modId) {
                let modObj = this.$store.getters.getDownloadCourseModTask(modId);
                if (modObj === null || modObj === undefined || modObj === '') {
                    return null;
                } else {
                    return modObj;
                }
            };
        },
        notHaveData() {
            return function(status) {
                let downloadCourseTaskList = this.$store.state.config.downloadCourseTaskList;
                for (let i = 0; i < downloadCourseTaskList.length; i++) {
                    let downloadCourseTask = downloadCourseTaskList[i];
                    for (let i = 0; i < downloadCourseTask.modules.length; i++) {
                        let modObj = this.$store.getters.getDownloadCourseModTask(downloadCourseTask.modules[i]);
                        if (modObj && modObj.status === status) {
                            return false;
                        }
                    }
                }
                return true;
            };
        },
        haveStatusInModules() {
            return function(modules, operation) {
                for (let i = 0; i < modules.length; i++) {
                    let modObj = this.$store.getters.getDownloadCourseModTask(modules[i]);
                    if (!modObj) {
                        continue;
                    }
                    if (operation === 'downloaded') {
                        //已下载
                        if (modObj.status === 'completed') {
                            return true;
                        }
                    } else if (operation === 'downloading') {
                        //正在下载
                        if (modObj.status !== 'completed') {
                            return true;
                        }
                    }
                }
                return false;
            };
        }
    }
};
</script>

<style scoped lang="less">
    .module-list-15 {
        & > li {
            border-bottom: 1px solid #e6e6e6;
            padding: 28px 0 23px;
            & > p {
                font-size: 14px;
                font-weight: bold;
                color: #1f53cc;
                padding: 0 15px 5px;
            }
            ul {
                li {
                    padding: 20px 0 0 15px;
                    .box-19 {
                        float: left;
                        width: calc(100% - 60px);
                        .gray-box-bg {
                            width: 50px;
                            height: 50px;
                            background: #eeeeee;
                            float: left;
                        }
                        .download-content {
                            float: left;
                            padding-left: 15px;
                            width: calc(100% - 65px);
                            .progress {
                                width: 100%;
                                height: 3px;
                                border-radius:7px;
                                margin: 15px 0 5px;
                                background-color: #C7C7C7;
                                box-sizing: border-box;
                                .loader-container {
                                    height: 100%;
                                    border-radius:7px;
                                    background-color: #1f53cc;
                                    box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.2);
                                }
                            }
                            .down-line {
                                width: 100%;
                                height: 2px;
                                background: #f5f5f5;
                                border-radius: 1px;
                                box-sizing: border-box;
                                margin: 15px 0 5px;
                                position: relative;
                                i {
                                    position: absolute;
                                    top:0;
                                    left: 0;
                                    width: 100%;
                                    height: 2px;
                                    background: linear-gradient(0deg, #075ebb, #f5f5f5);
                                    &.cur {
                                        background: linear-gradient(0deg, #cccccc, #f5f5f5);
                                    }
                                }
                            }
                        }
                    }
                    .delete-box {
                        float: left;
                        width: 60px;
                        height: 50px;
                        i {
                            display: inline-block;
                            margin: 18px 0 0 28px;
                        }
                    }
                }
            }
        }
        li:nth-last-child(1) {
            border: none;
        }
    }
</style>
